<template>
  <view class="warranty">
    <view class="warranty-box">
      <!-- 备案编号 -->
      <view class="serial-number">备案注册单编号：BA20241023ACH9</view>
      <view class="explain">申请时间：2024-10-18 17:22:32</view>
      <view class="record-item">
        <view class="login-info">
          <view>商品名称:</view>
          <view>电饭锅回复打工魂发个话费好根据</view>
        </view>
        <view class="login-info">
          <view>序列号:</view>
          <view>6547981451</view>
        </view>
        <view class="login-info">
          <view>购买授权店:</view>
          <view>武汉034店</view>
        </view>
        <view class="login-info">
          <view>审核状态:</view>
          <view>已审核质保</view>
        </view>
        <view class="login-info">
          <view>质保类型:</view>
          <view>免费维修</view>
        </view>
        <view class="login-info">
          <view>质保编号:</view>
          <view>654654654654654</view>
        </view>
        <view class="login-info">
          <view>免费质保期至:</view>
          <view>2026年08月22日</view>
        </view>
      </view>
      <!-- 质保卡 -->
      <img
        v-if="tempFilePath"
        class="temp-filePath"
        :src="tempFilePath"
        alt=""
      />
      <r-canvas v-else ref="rCanvas"></r-canvas>
      <view class="give">长按图片保存至本地相册</view>
      <view class="after-sale" @click="onWorkOrder">售后工单</view>
    </view>
  </view>
</template>

<script>
import rCanvas from "@/components/r-canvas/r-canvas.vue";
export default {
  components: {
    rCanvas,
  },
  data() {
    return {
      // imgUrl:'https://ps.ssl.qhimg.com/sdmt/196_133_100/t014246df4644f77274.jpg',
      // imgUrl: "http://eshop.gzyingshengkeji.cn/common/minio/eshop/8529e46ccc8b4d78809db70d927e8ec4.png",
      imgUrl:
        "https://e-commerce-dev.obs.ap-southeast-3.myhuaweicloud.com:443/e-commerce%2F1a5871c154b14bbf977ab156c301e630.png",
      cardTitle: "Positive Grid Gift Card eligible for discounts",
      cardNumber: "S0511G12C000830",
      warrantyNumber: "ZBK202410190327",
      warrantyTime: "2026年08月22日",
      tempFilePath: "", // 生成的图片
    };
  },
  onLoad(options) {
    this.getData();
  },
  methods: {
    // 售后工单
    onWorkOrder() {
      uni.navigateTo({
        url: "/pages/order-filing-registration/work-order?id=" + 666,
      });
    },
    getData() {
      this.initCanvas();
      return;
      uni.request({
        url: "https://eshop.gzyingshengkeji.cn/buyer/member/activity/detail?id=85",
        header: {
          // 'Content-Type': 'application/x-www-form-urlencoded'
          "Content-Type": "application/json", //自定义请求头信息
          accesstoken:
            "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyQ29udGV4dCI6IntcInVzZXJuYW1lXCI6XCIxMzAxMTExMTExMVwiLFwibmlja05hbWVcIjpcIuW8oOS4iVwiLFwiZmFjZVwiOlwiaHR0cDovL2VzaG9wLW1hbmFnZXItdGVzdC5ndWFuZ3pob3V5dW5zaGVuZy5jb20vY29tbW9uL21pbmlvL2VzaG9wLzg5ZTRiYjE0NWE4NjQ1Yzg4ZTdjMTkyODBiNjA1M2M3LmpwZWdcIixcImlkXCI6XCIxMzc2NDE3Njg0MTQwMzI2OTEyXCIsXCJsb25nVGVybVwiOmZhbHNlLFwicm9sZVwiOlwiTUVNQkVSXCIsXCJpc1N1cGVyXCI6ZmFsc2V9Iiwic3ViIjoiMTMwMTExMTExMTEiLCJleHAiOjE3MzIwMjA2NDF9.dzfKMsZrBSytbvw3QZ9Kp136srfKmBMqv1-nIwLgt5o",
        },
        method: "GET", //请求方式，必须为大写
        success: (res) => {
          if (res.data.code == 200) {
            this.imgUrl = res.data.result.bannerPath;
            this.initCanvas();
          }
          console.log("接口返回------", res);
        },
      });
    },
    initCanvas() {
      this.$nextTick(async () => {
        // 初始化
        await this.$refs.rCanvas.init({
          canvas_id: "rCanvas",
          canvas_width: 350,
          canvas_height: 412,
        });

        // 画图
        await this.$refs.rCanvas
          .drawImage({
            url: this.imgUrl,
            x: 0,
            y: 0,
            w: 350,
            h: 412,
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });

        // 质保卡说明
        await this.$refs.rCanvas
          .drawText({
            text: this.cardTitle,
            max_width: 0,
            x: 30,
            y: 335,
            font_color: "#000000",
            font_size: 14,
            font_weight: "bold",
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });
        // 质保卡编号
        await this.$refs.rCanvas
          .drawText({
            text: this.cardNumber,
            max_width: 0,
            x: 30,
            y: 355,
            font_color: "#666666",
            font_size: 12,
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });

        // 质保编号key
        await this.$refs.rCanvas
          .drawText({
            text: "质保编号:",
            max_width: 0,
            x: 30,
            y: 375,
            font_color: "#666666",
            font_size: 12,
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });
        // 质保编号val
        await this.$refs.rCanvas
          .drawText({
            text: this.warrantyNumber,
            max_width: 0,
            x: 85,
            y: 375,
            font_color: "#666666",
            font_size: 12,
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });

        // 免费质保期至key
        await this.$refs.rCanvas
          .drawText({
            text: "免费质保期至:",
            max_width: 0,
            x: 30,
            y: 395,
            font_color: "#666666",
            font_size: 12,
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });

        // 免费质保期至val
        await this.$refs.rCanvas
          .drawText({
            text: this.warrantyTime,
            max_width: 0,
            x: 110,
            y: 395,
            font_color: "#666666",
            font_size: 12,
          })
          .catch((err_msg) => {
            uni.showToast({
              title: err_msg,
              icon: "none",
            });
          });

        // 生成海报
        await this.$refs.rCanvas.draw((res) => {
          this.tempFilePath = res.tempFilePath;
          //res.tempFilePath：生成成功，返回base64图片
          // 保存图片
          // this.$refs.rCanvas.saveImage(res.tempFilePath);
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.warranty {
  .warranty-box {
    padding: 24rpx 24rpx 10rpx 24rpx;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    position: relative;
    z-index: 9;
    border-radius: 10rpx;

    .give {
      font-size: 22rpx;
      margin-top: 20rpx;
      // color: #999999;
      color: $main-color;
      padding-left: 10rpx;
      box-sizing: border-box;
      text-align: center;
    }

    .serial-number {
      font-size: 26rpx;
      font-weight: 600;
      padding: 0 24rpx;
    }

    .explain {
      font-size: 24rpx;
      color: #666666;
      line-height: 40rpx;
      box-sizing: border-box;
      padding: 0 24rpx;
      margin-top: 2rpx;
    }

    .record-item {
      box-shadow: 0 0 20rpx #eeeeee;
      width: 100%;
      overflow: hidden;
      border-radius: 16rpx;
      padding: 20rpx 24rpx;
      box-sizing: border-box;
      margin: 20rpx 0;

      .login-info {
        display: flex;
        font-size: 24rpx;
        line-height: 46rpx;
        color: #999999;

        view:first-child {
          width: 160rpx;
          margin-right: 10rpx;
        }

        view:last-child {
          flex: 1;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .login-info:first-child {
        font-weight: bold;
        color: #333333;
      }

      .login-info:nth-child(2) {
        border-bottom: 1rpx #dddddd solid;
        margin-bottom: 10rpx;
        padding-bottom: 5rpx;
      }
    }

    .warranty-card {
      width: 100%;
    }
    .temp-filePath {
      width: 700rpx;
      height: 824rpx;
      display: block;
    }
    .after-sale {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-radius: 10rpx;
      background: $main-color;
      color: #ffffff;
    }
  }
}
</style>
